<style>
    .ly-dashboard-echarts {
        width: 100%;
        height: 185px;
    }

</style>
<template>
    <div  >
        <e-chart
                v-loading="loading"
                :options="chartConfig"
                :auto-resize="true"
                :style="{'width': '100%','height':height+'px'}"
        ></e-chart>
    </div>
</template>
<script>

    //这里定义组件
    Rap.define([], function () {
        return {
            name: 'ly-chart-pie',
            props:
                {
                    noGlobal:Boolean,
                    name_map:{
                        'default': function () {
                            return {}
                        }
                    },
                    params: {
                        'default': function () {
                            return {}
                        }
                    },
                    date: {
                        'default': function () {
                            return {}
                        }
                    },
                    top:{
                        'default': 10
                    },
                    //高度
                    height: {
                        'default': 310
                    },
                    //数据链接
                    link: {
                        'default': '',
                    },
                    //x 取值
                    key_name: {
                        'default': 'g'
                    },
                    //y 取值
                    key_value: {
                        'default': 'c'
                    },
                    //line 类型时背景色
                    color: {
                        default:function (){
                            if(Ly.chart&&Ly.chart.color){
                                return Ly.chart.color;
                            }
                            return ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
                        }
                    },
                    //显示底部数据 table
                    table:{
                        default:false
                    }
                },
            data: function () {

                return {
                    result:[],
                    loading: false,
                    chartConfig: null,
                    global_params:Ly.chart.global_params
                }
            },
            created: function () {
                this.chart_id = this._uid;
                var loadDebounce = _.debounce(this.load, 100);
                this.loadDebounce = loadDebounce;
                loadDebounce();
            },
            watch: {
                params: {
                    deep: true,
                    handler: function () {
                        this.loadDebounce();
                    }
                },
                date: {
                    deep: true,
                    handler: function () {
                        this.loadDebounce();
                    }
                },
                global_params:{
                    deep: true,
                    handler: function () {
                        if(!this.noGlobal){
                            this.loadDebounce();
                        }

                    }
                }
            },
            methods: {
                download:function (){

                },
                load: function () {
                    var config={
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'right'
                        },
                        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
                        series: [
                            {
                                type: 'pie',
                                radius: '80%',
                                data: [

                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    var me=this;
                    var link = me.link;
                    if (link.indexOf('?') === -1) {
                        link += '?';
                    }else{
                        var end=link.substring(link.length-1,link.length);
                        if(end!=='?'&&end!=='&'){
                            link+="&";
                        }
                    }
                    for (var key in me.date) {
                        link += (key + "=" + me.date[key] + "&");
                    }
                    var params = me.params;
                    if(!this.noGlobal){
                         params = _.extend({},Ly.chart.global_params,me.params);
                    }
                    me.loading=true;
                    axios.post(link,params).then(function (rs){
                        config.series[0].data=[];
                        var i=0;
                        var result=[];
                        var value_all = 0;
                        _.each(rs.data.data,function (item){
                            var it={
                                name:item[me.key_name],
                                value:item[me.key_value]
                            };
                            if(me.name_map[it.name]){
                                it.name=me.name_map[it.name];
                            }
                            value_all+=it.value;
                            config.series[0].data.push(it);
                            result.push(it);
                            i++;
                        });
                        me.chartConfig=config;
                        me.result = result;
                        me.loading=false;
                    });

                }
            }
        }
    })
</script>
